<template>
	<div>
		<el-card class="box-card">
			<template #header>
				<div class="card-header">
					<span>{{ groupDetailInfo?.competitionName }}</span>
					<!-- <el-icon><CloseBold /></el-icon> -->
				</div>
			</template>
			<el-descriptions>
				<el-descriptions-item label="比赛项目：">{{ groupDetailInfo?.competitionProjectName }}</el-descriptions-item>
				<el-descriptions-item label="项目类型：">{{ groupDetailInfo?.projectTypeName }}</el-descriptions-item>
				<el-descriptions-item label="比赛类型：">{{ groupDetailInfo?.gameTypeName }}</el-descriptions-item>
				<el-descriptions-item label="比赛开始时间：">{{ groupDetailInfo?.competitionStartTime }}</el-descriptions-item>
				<el-descriptions-item label="比赛结束时间：">{{ groupDetailInfo?.competitionEndTime }}</el-descriptions-item>
				<el-descriptions-item label="比赛节点：">{{ groupDetailInfo?.competitionNode }}</el-descriptions-item>
				<el-descriptions-item label="参赛者/团队：">{{ groupDetailInfo?.contestantOrTeam }}</el-descriptions-item>
				<el-descriptions-item label="感应器：">{{ groupDetailInfo?.sensorNumbers }}</el-descriptions-item>
				<el-descriptions-item label="比赛号位：">{{ groupDetailInfo?.competitionNumberPosition }}</el-descriptions-item>
			</el-descriptions>
			<el-table :data="tableData" border style="width: 100%">
				<el-table-column prop="competitionRanking" align="center" label="比赛排名" />
				<el-table-column prop="achievementCircle" align="center" label="总圈数" />
				<el-table-column align="center" label="总用时">
					<template #default="scope">
						{{ convertTimeString((parseFloat(scope.row.achievementTime) - parseFloat(scope.row.buckleTime)).toFixed(3)) }}
					</template>
				</el-table-column>
				<el-table-column prop="actualLap" align="center" label="实际圈数" />
				<el-table-column prop="buckleRing" align="center" label="扣圈数" />
				<!-- <el-table-column prop="lastLapTime" label="最后一圈时间" /> -->
				<el-table-column prop="buckleTime" align="center" label="加时" />
				<el-table-column prop="yellowCard" align="center" label="黄牌" />
				<el-table-column prop="redCard" align="center" label="红牌" />
				<el-table-column prop="missingMark" align="center" label="漏标" />
				<el-table-column prop="score" align="center" label="总成绩">
					<template #default="scope">
						{{
							(scope.row.achievementCircle < 0 ? 0 : scope.row.achievementCircle) +
							"圈" +
							"" +
							convertTimeString(scope.row.achievementTime)
						}}
					</template>
				</el-table-column>
			</el-table>
		</el-card>
		<el-card class="box-card">
			<el-tabs @tab-click="handleChangeTabsClick" type="border-card">
				<el-tab-pane style="padding: none" label="过点记录">
					<el-table :data="achievementOverPointInfos" border style="width: 100%" :header-cell-style="{ background: '#fff' }">
						<!-- <el-table-column prop="date" label="id" /> -->
						<!-- <el-table-column prop="name" type="selection" label="选择" /> -->
						<el-table-column align="center" prop="competeName" label="参赛者" />
						<el-table-column width="100" align="center" prop="numberOfTurns" label="圈数" />
						<el-table-column align="center" prop="decoderNumber" label="解码器" />
						<el-table-column align="center" prop="sensorNumber" label="传感器" />
						<el-table-column :formatter="dateFormat" align="center" prop="startTime" label="开始时间" />
						<el-table-column :formatter="dateFormat" align="center" prop="endTime" label="过点时间" />
						<el-table-column align="center" prop="timeUse" label="用时" />
						<el-table-column align="center" prop="signalIntensity" label="信号强度" />
						<el-table-column width="100" align="center" prop="isValid" label="是否有效">
							<template #default="scope">
								<el-tag :type="scope.row.isValid ? 'success' : 'danger'">
									{{ scope.row.isValid ? "有效" : "无效" }}
								</el-tag>
							</template>
						</el-table-column>
					</el-table>
				</el-tab-pane>
				<el-tab-pane label="惩罚记录">
					<el-table :data="achievementPunishmentInfos" border style="width: 100%">
						<!-- <el-table-column prop="date" label="id" /> -->
						<el-table-column align="center" prop="competeName" label="操作者" />
						<el-table-column align="center" prop="penaltyEvent" label="惩罚事件">
							<template #default="scope">
								{{ scope.row.penaltyEvent == 1 ? "漏标" : scope.row.penaltyEvent == 2 ? "黄牌" : "红牌" }}
							</template>
						</el-table-column>
						<el-table-column align="center" prop="penaltyReason" label="惩罚原因" />
						<el-table-column align="center" prop="penaltyTime" label="惩罚时间" :formatter="dateFormat" />
						<el-table-column align="center" prop="penaltyStatus" label="惩罚状态">
							<template #default="scope">
								<el-tag :type="scope.row.penaltyStatus ? 'success' : 'danger'">
									{{ scope.row.penaltyStatus ? "启用" : "已撤销" }}
								</el-tag>
							</template>
						</el-table-column>
						<el-table-column align="center" prop="revokeTime" label="撤销时间" :formatter="dateFormat" />
						<el-table-column align="center" prop="operatorUser" label="操作人" />
					</el-table>
				</el-tab-pane>
			</el-tabs>
			<div class="main_box">
				<el-pagination
					v-if="pagination.active == 0 ? achievementOverPointInfos.length : achievementPunishmentInfos.length"
					style="margin-top: 15px"
					v-model:currentPage="pagination.pageIndex"
					v-model:page-size="pagination.pageSize"
					:page-sizes="[10, 20, 50, 100]"
					layout="total, sizes, prev, pager, next, jumper"
					:total="pagination.total"
					background
					@size-change="pagination.handleSizeChange"
					@current-change="pagination.handleCurrentChange"
				/>
			</div>
		</el-card>
	</div>
</template>

<script lang="ts" setup>
// import { Refresh, Download } from "@element-plus/icons-vue";
import type { TabsPaneContext } from "element-plus";
import { ref } from "vue";
import { useRoute } from "vue-router";
import { dateFormat, time, convertTimeString } from "@/utils/util";
import competitionAchievementApi from "@/api/modules/competitionAchievement";
/**
 * Hooks
 */
const route = useRoute();
/**
 * Tstype类型
 */
interface Table {
	competitionRanking: number; //比赛排名
	achievementCircle: number; //成绩圈
	achievementTime: string; //成绩时
	actualLap: number; //实际跑圈
	buckleRing: number; //扣圈
	lastLapTime: string; //最后一圈时间
	buckleTime: string; //扣时
	yellowCard: number; //黄牌
	redCard: number; //红牌
	missingMark: number; //漏标
	score: number; //成绩得分
}
const groupDetailInfo = ref<any>(null); //成绩详情数据
const tableData = ref<Array<Table>>([]); //个人比赛排名情况
const achievementOverPointInfos = ref<Array<any>>([]); //过点记录
const achievementPunishmentInfos = ref<Array<any>>([]); //惩罚记录
const pagination = ref<any>({
	//分页
	active: 0, //表格切换
	pageIndex: 1,
	pageSize: 10,
	total: 10,
	handleSizeChange: (pageSize: number) => {
		pagination.value.pageSize = pageSize;
		if (pagination.value.active == 0) {
			GetAchievementOverPointInfoList();
			return;
		}
		getAchievementPunishmentList();
	},
	handleCurrentChange: (pages: number) => {
		pagination.value.pageIndex = pages;
		if (pagination.value.active == 0) {
			GetAchievementOverPointInfoList();
			return;
		}
		getAchievementPunishmentList();
	}
});
const id: string = route.query.id as string;
/**
 * 获取成绩详情信息
 */
const getData = async () => {
	//获取成绩详情信息
	let { result } = await competitionAchievementApi.GetEventsSessionCompetitionAchievementInfoDetailsApi(id);
	let { code, data } = result;
	if (code != 200) {
		return;
	}
	data.competitionStartTime = time(data.competitionStartTime);
	data.competitionEndTime = time(data.competitionEndTime);
	groupDetailInfo.value = data;
	let {
		competitionRanking,
		achievementCircle,
		achievementTime,
		actualLap,
		buckleRing,
		lastLapTime,
		buckleTime,
		yellowCard,
		redCard,
		missingMark,
		score
	} = data;
	tableData.value.push({
		competitionRanking,
		achievementCircle,
		achievementTime,
		actualLap,
		buckleRing,
		lastLapTime,
		buckleTime,
		yellowCard,
		redCard,
		missingMark,
		score
	});
	// achievementOverPointInfos.value = [...data.achievementOverPointInfos];
	// achievementPunishmentInfos.value = [...data.achievementPunishmentInfos];
};
/**
 * 获取惩罚记录
 */
const getAchievementPunishmentList = () => {
	let { pageIndex, pageSize } = pagination.value;
	competitionAchievementApi
		.GetAchievementPunishmentInfoApi({
			pageIndex: pageIndex,
			pageSize: pageSize,
			Order: "",
			Sort: "",
			competitionAchievementId: id //赛事成绩ID
		})
		.then((res: any) => {
			let { code, data, totalCount } = res.result;
			if (code != 200) {
				return;
			}
			pagination.value.total = totalCount;
			achievementPunishmentInfos.value = data;
		});
};
/**
 * 获取过点记录
 */
const GetAchievementOverPointInfoList = () => {
	let { pageIndex, pageSize } = pagination.value;
	competitionAchievementApi
		.GetAchievementOverPointInfoApi({
			pageIndex: pageIndex,
			pageSize: pageSize,
			Order: "",
			Sort: "",
			competitionAchievementId: id //赛事成绩ID
		})
		.then((res: any) => {
			let { code, data, totalCount } = res.result;
			if (code != 200) {
				return;
			}
			pagination.value.total = totalCount;
			achievementOverPointInfos.value = data;
		});
};
/**
 * 进入页面首次调用数据请求
 */
getData();
GetAchievementOverPointInfoList();
/**
 *
 * @param plan 点击的tabas下标信息
 * @param ev 选项实例
 */
const handleChangeTabsClick = (plan: TabsPaneContext) => {
	let { label } = plan.props;
	pagination.value.pageIndex = 1;
	pagination.value.pageSize = 10;
	if (label == "过点记录") {
		pagination.value.active = 0;
		GetAchievementOverPointInfoList();
	} else {
		pagination.value.active = 1;
		getAchievementPunishmentList();
	}
};
</script>

<style lang="scss" scoped>
.main_box {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
}
:deep(.el-tabs__content) {
	padding: none !important;
}
::v-deep.el-tabs--border-card {
	.el-tabs__content {
		padding: 0;
	}
}
.box-card {
	margin-bottom: 15px;
	.box-header {
		display: flex;
		// justify-content: space-between;
		// border-bottom: 1px solid #eee;
		.tabBtn {
			display: flex;
			.btn-item {
				font-size: 14px;
				padding: 10px;
				border: 1px solid #eee;
				margin-right: 5px;
				cursor: pointer;
			}
			.active {
				background-color: rgb(247, 245, 250);
			}
		}
	}
}
.card-header {
	display: flex;
	justify-content: space-between;
}
</style>
